<script setup lang="ts" name="person-new">
import { reactive } from "vue";

//数据
  let car = reactive( {
    brand: '奔驰',
    price: 100
  })
  let games = reactive([
    {id: 'abc01', name: '王者荣耀'},
    {id: 'abc02', name: '原神'},
    {id: 'abc03', name: '三国志'}
  ])
  let obj = reactive({
    a: {
      b: {
        c: {
          age: 12346
        }
      }
    }
  })

  // console.log(car) //Proxy(Object) {brand: '奔驰', price: 100}

  //方法
  function changePrice() {
   car.price += 10
  }
  function changeFirstGameName() {
    games[0].name= '流星蝴蝶剑'
  }
  function changeObj () {
    obj.a.b.c.age = 111
  }
</script>

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <hr>
    <h2>游戏列表</h2>
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstGameName">修改第一个游戏名字</button>
    <hr>
    <h2>测试: {{ obj.a.b.c.age }}</h2>
    <button @click="changeObj">测试修改</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin:  0 15px;
}
li {
  font-size: 20px;
}
</style>